<template>
  <div id="conversion">
    <Headers :title="$t('asset.assetsDetail.conversion')"/>
    <div class="conversion-con">
      <ul>
        <li class="conver-left">
          <div class="type-balance">
            <img src="../../assets/eoc.png" alt>
            <span class="bz-type">
              {{transforData.type}}
              <span>{{$t("asset.conversion.overage")}}</span>
            </span>
          </div>
          <div class="type-number">{{transforData.typeNum}}</div>
          <div class="trans-type">
            <p>{{transforData.type}}({{transforData.moneyType}}) {{transforData.parities}}</p>
            <p class="type-details">{{$t("asset.conversion.maxNum")}}{{transforData.maxTransNum}}{{transforData.type}}</p>
          </div>
        </li>
        <li class="conver-center">
          <img src="../../assets/transfor_icon.png" alt>
        </li>
        <li class="conver-right">
          <div class="type-balance">
            <img src="../../assets/eths.png" alt>
            <span class="bz-type">
              {{transforData.type}}
              <span>{{$t("asset.conversion.overage")}}</span>
            </span>
          </div>
          <div class="type-number">{{transforData.typeNum}}</div>
          <div class="trans-type">
            <p>{{transforData.type}}({{transforData.moneyType}}) {{transforData.parities}}</p>
            <p class="type-details">{{$t("asset.conversion.maxNum")}}{{transforData.maxTransNum}}{{transforData.type}}</p>
          </div>
        </li>
      </ul>
    </div>
    <form class="transfor-input">
      <input type="tel" v-model="transFrom.moenyNum" :placeholder='$t("asset.conversion.exchangeNum")'>
      <p>{{$t("asset.conversion.totalMoneyNum")}}：{{totalMoney}}</p>
      <input type="text" v-model="transFrom.password" :placeholder='$t("asset.conversion.transactionPwd")'>
      <button class="transfor-sub" @click="transForSub">{{$t("asset.conversion.submits")}}</button>
    </form>
  </div>
</template>

<script>
export default {
  name: "conversion",
  data() {
    return {
      transforData: {
        type: "EOC",
        typeNum: 0,
        moneyType: "$",
        parities: "1.4371",
        maxTransNum: "0.0000"
      },
      transFrom: {
        moenyNum: "",
        password: ""
      },
      totalMoney: "0.0000"
    };
  },
  methods: {
    transForSub(e) {
      e.preventDefault();
    }
  }
};
</script>

<style lang="stylus" scoped>
@import '../../utils/styl/mixin.styl'
#conversion
  positCenter(0,0,0,0,0,0)
  width 100%
  background-color $bodyBg
  .conversion-con
    margin-top rem(98)
    width 100%
    height rem(178)
    background-color $listBg
    ul
      box-sizing border-box
      padding rem(19) rem(27) rem(25) rem(27)
      display flex
      justify-content space-between
      align-items center
      .conver-left, .conver-right
        color #fff
        .type-balance
          text-align left
          img
            width rem(30)
            height rem(30)
            object-fit contain
            vertical-align middle
          span
            font-size rem(15)
            color $fontColor
          .bz-type
            color $typeColor
            vertical-align middle
            margin-left rem(5)
        .type-number
          font-size rem(40)
          font-weight bold
          padding rem(22) 0 rem(14)
        .trans-type
          text-align left
          p
            font-size rem(14)
            color $fontColor
            margin-bottom rem(2)
          .type-details
            font-size rem(12)
            color $colors
      .conver-center
        width rem(50)
        height rem(50)
        img
          width 100%
          height 100%
          object-fit contain
      .conver-right
        text-align right
        .type-balance
          text-align right
        .type-number
          text-align center
        .trans-type
          text-align right
  .transfor-input
    margin-top rem(52)
    box-sizing border-box
    padding rem(0) rem(20)
    input, button
      display block
      width 100%
      outline none
      box-sizing border-box
      padding rem(15) rem(23)
      color $colors
      font-size rem(15)
      background-color $inputBg
      border-radius rem(25)
    p
      padding rem(8) 0
      font-size rem(13)
      color $typeColor
      text-align left
      margin-left rem(20)
    .transfor-sub
      margin-top rem(48)
      background-color $btnColor
      color $fontColor
      font-size rem(14)
</style>
